<template>
  <div>
    <div>【服务资源占用比】</div>
    <div ref="target" class=" w-full h-full" ></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref,onMounted,watch } from 'vue';
const props = defineProps({
  data:{
    type:Object,
    required:true
  }
})
const target = ref(null)
let myChart = null

onMounted(()=>{
  myChart = echarts.init(target.value)
  renderChart()
})

watch(()=>props.data,()=>{
  renderChart()
})

const renderChart = () =>{
  const options = {
    xAxis:{
      type:'category',
    	data: props.data.servers.map((item) => item.name),
      axisLabel:{
        color:'#9EB1C8'
      },
    },
    yAxis:{
      type:'value',
      show:false,
      max:function (value){
        return parseInt(value.max * 1.2)
      }
    },
    grid:{
      top:16,
      right:0,
      bottom:26,
      left:-26,
      // 计算位置包含标签
      containLabel:true
    },
    series:[
      {
        type:'bar',
        data:props.data.servers.map(item=>{
          return {
            name:item.name,
            value:item.value
          }
        }),
        itemStyle:{
        color:'#5D98CE',
        barBorderRadius:5,
        shadowColor:"rgba(0,0,0,0.3)",
        shadowBlur:5
      },
      barWidth:12,
      label:{
        show:true,
        // 位置
        position:'top',
        textStyle:{
          color:'#fff'
        },
        // 操作
        formatter:'{c}%'
      }
      }
    ],
  }
  myChart.setOption(options)
}

</script>

<style lang="scss" scoped>

</style>